<template>
    <div>
        <b-header :goBack="true" :goHome="true">
            详情{{$route.params.id}}
        </b-header>
        <div class="con">
            <dl>
                <dt>
                    <img :src="con.cover" alt="">
                </dt>
                <dd>
                    <button @click="goReady">去阅读界面</button>
                </dd>
            </dl>
        </div>
    </div>
</template>
<script>
import bHeader from '../components/bHeader'
export default {
    components:{
        bHeader
    },
    created(){
        let id = this.$route.params.id;
        this.getData(id);
    },
    // watch:{
    //     '$route.params.id'(val,oldVal){
    //         this.getData(val);
    //     }
    // },
    beforeRouteEnter(to,from,next){
        console.log(this);
        next();
    },
    beforeRouteUpdate(to,form,next){
        let id = to.params.id;
        this.getData(id);
    },
    beforeRouteLeave(to,from,next){
        let answer = window.confirm('确认保存修改吗？');
        if(answer){
            next()
        }else{
            next(false);
        }
    },
    data(){
        return {
            con:{}
        }
    },
    methods:{
        getData(id){
            this.$http.get(`/api/detail?id=${id}`).then(res => {
                console.log(res);
                if(res.data.code === 1){
                    this.con = res.data.data.item;
                }else{
                    alert('暂无数据');
                    // this.$router.replace('/')
                }
            }).catch(error => {
                console.warn(error);
            })
        },
        goReady(){
            this.$router.push({name:'ready',params:{id:this.$route.params.id}})
        }
    }
}
</script>

<style lang="scss">
    .con{
        width:100%;
        dl{
            width:100%;
            display: flex;
            padding:0 10px;
            dt{
                width:80px;
                height: 100px;
                overflow: hidden;
                img{
                    width:100%;
                    height: 100%;
                };
            }
        }
    }
</style>

